<template>
    <div class="uint-header" :class="{'margin':margin}" v-on:click="dropDown">
        <span class="lf">{{unitName || "全部"}}({{total}}人)</span>
        <span class="rt xiala" ><i class="icon-dropdowm"></i></span>
        <!--<span class="rt xiala"><i><img src="/static/imgs/xiala.png" alt=""></i></span>-->
        <v-mask :showMask.sync="showMask"  :dataList="dataList" @returnChecked="getCheckedValue"></v-mask>
    </div>
</template>
<script>
import Bus from '@/common/js/vueBus'
import Mask from '@/components/public/mask'
export default {
  data(){
      return{
          value:"",
          num:100,
          showMask:false,
          unitName:'',
          marginBool:false,
      }
  },
  methods:{
    dropDown:function(){
      this.showMask = true;
    },
    getCheckedValue:function(val,label){
    	console.log(val);
      if (val === '全部') {
        this.unitName = '';
      } else {
        this.unitName = val;
      }
      
      this.$emit('returnChecked',val,label);
      // localStorage.setItem('');
    }
  },
  components:{
    'v-mask':Mask
  },
  props:{
    dataList:{
      type:Array
    },
    total:{
      type:Number
    },
    margin:{
      type:Boolean
    }
  },
}
</script>
<style scoped>

div.uint-header{
  line-height:0.72rem;
  height:0.72rem;
  position: relative;
  background: #fff;
  margin: 0.2rem auto;
}
div.margin{
  margin: 0 auto;
}

.uint-header{
  height:0.72rem;
}
.uint-header img{
  width:0.28rem;
  height:0.28rem;
}
.uint-header{
    clear: both;
    overflow: hidden;
    padding-left:0.32rem;
    padding-right:0.32rem;
}
</style>

